<template>
  <YsRow>
    <table class="table border_style" style="border-top:none">
      <tr>
        <td colspan="2" class="text_01 border_style">
          <div class="text-set">
            <div class="text-left">
              <label>专家评审：</label>
            </div>
            <div class="text-right">
              <span class="text-font"> {{ getdata(templat4[0])}}</span>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="text_01 border_style">
          <div class="text-set">
            <div class="text-left">
              <label>检测结果：</label>
            </div>
            <div class="text-right">
              <span class="text-font"> {{ getdata(templat4[1])}}</span>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="text_50 text_01 border_style"><label>检测：</label> <span class="rightDate"> {{ getdata(templat4[2],true)}}</span></td>
        <td class="text_50 text_01 border_style"><label>审核：</label> <span class="rightDate"> {{ getdata( templat4[3],true)}}</span></td>
      </tr>
    </table>
  </YsRow>
</template>
<script>


export default {
  name: 'previewFourForm',
  props: {
    templateBean: {
      type: Object,
      default: () => {
        return {}
      }
    },
    reportDataBean: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    //获取表头
    templateBean(v) {
      if (v && v.templateFields4) {
        this.templat4 = v.templateFields4
      }
    },
    //获取表格body
    reportDataBean(v) {
      if (v && v.table_field_data4) {
        this.tableField4 = v.table_field_data4
      }
    }
  },
  data() {
    return {
      templat4: [],
      tableField4: [],
    }
  },
  created() {

  },
  methods: {
    getdata(item, flag) {
      let res = this.tableField4.find(v => { return v.values[0].column_id == item.field_id })
      if (res) {
        if (flag) {
          let date = res.values[0].value.substring(0, 10).split("-")
          return `${date[0]}年${date[1]}月${date[2]}日`
        }
        return res.values[0].value
      }
      return ""
    }
  }
}
</script>
<style scoped lang='less'>
.table {
  border: 1px solid #e1e6f0;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  tr {
    td {
      font-size: 16px;
      padding: 0 16px;
      height: 57px;
      border-right: 1px solid #e1e6f0;
      border-bottom: 1px solid #e1e6f0;
      .text-set {
        padding: 10px 0;
        display: flex;
        .text-left {
          width: 90px;
        }
        .text-right {
          flex: 1;
        }
        .text-font {
          font-size: 14px;
          font-family: PingFangSC-Regular;
          line-height: 24px;
          color: #405680;
        }
      }

      .rightDate {
        float: right;
      }
    }
    .text_50 {
      width: 50%;
    }
    .border_center {
      text-align: center;
      height: 100px;
      line-height: 100px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
